<template>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
        @click="handleCheck(todo.id)"
      />
      <span v-show="!todo.isEditing">{{ todo.title }}</span>
      <input
        type="text"
        v-show="todo.isEditing"
        v-model="todo.title"
        @blur="handleBlur(todo.id, $event)"
        ref="input"
      />
    </label>
    <div class="actions" v-show="!todo.isEditing">
      <button class="btn btn-danger" @click="handleEdit(todo)">编辑</button>
      <button class="btn btn-danger" @click="handleDelete(todo.id)">
        删除
      </button>
    </div>
  </li>
</template>

<script>
export default {
  name: "MyItem",
  props: ["todo"],
  methods: {
    handleCheck(id) {
      this.$bus.$emit("changecheckbox", id);
    },
    handleDelete(id) {
      this.$bus.$emit("deleteItem", id);
    },
    handleEdit(todo) {
      todo.isEditing = true;
      this.$nextTick(function(){
        this.$refs.input.focus()
      })
    },
    handleBlur(id, e) {
      this.todo.isEditing = false;
      this.$bus.$emit("changetodoTitle", {
        id,
        title: e.target.value,
      });
      
    },
  },
};
</script>

<style scoped>
.todo-main li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.3s;
}

.actions {
  margin-left: auto;
  display: none;
  gap: 12px;
}
.todo-main li:hover .actions {
  display: flex;
}
.btn-danger {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background-color: #ef4444;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}
/* 任务项 hover 状态：浅灰背景，提示可交互 */
.todo-main li:hover {
  background-color: #f9fafb;
}

/* 复选框样式：放大+自定义颜色，提升点击体验 */
.todo-main li input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  accent-color: #4285f4;
  /* 复选框选中色，与输入框聚焦色统一 */
  cursor: pointer;
  /* 鼠标变指针，提示可点击 */
}

/* 任务文本样式：选中后加删除线+灰色，视觉区分已完成 */
.todo-main li span {
  font-size: 16px;
  color: #111827;
  transition: color 0.3s;
}

.todo-main li input[type="checkbox"]:checked + span {
  color: #9ca3af;
  text-decoration: line-through;
  /* 已完成任务加删除线 */
}

.todo-main li:hover .btn-danger {
  display: inline-block !important;
  /* hover 时显示 */
}

.btn-danger:hover {
  background-color: #dc2626;
  /* 按钮 hover 加深，反馈更明显 */
}
</style>
